<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<view class="patient">
			<view class="peopleInfo">
				<view class="name">
					王小柯
				</view>
				<view class="patient_card">
					2015****10
				</view>
			</view>
			<view class="operate" @click="open">
				<image style="width: 40rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg" mode="widthFix"></image>
				<text class="qie">切换</text>
			</view>
		</view>
		<!-- 添加就诊人信息 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" class="popup">
			<view class="popup-content">
				<!-- <text class="text">popup 内容</text> -->
				<view class="title">
					选择就诊人
				</view>
				<image class="close" @click="close" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1063.svg" mode="widthFix"></image>
				<view class="patientlists">
					<view class="patientlist">
						<view class="patient_name">
							王小柯
						</view>
						<view class="patient_card">
							2015****10
						</view>
					</view>
					<view class="patientlist">
						<view class="patient_name">
							李玲玲
						</view>
						<view class="patient_card">
							2015****10
						</view>
					</view>
				</view>
				<!-- 添加就诊人 -->
				<button type="primary" class="addpatient">添加就诊人</button>
			</view>
		</uni-popup>
		<!-- 记录列表 -->
		<view class="recordslists">
			<view class="recordslist" v-for="n in 4" :key="n">
				<view class="title">
					就诊时间：2020-01-01 15:20
				</view>
				<view class="infolists">
					<view class="infos">
						<view class="info_title">
							就诊医院
						</view>
						<view class="info_content">
							四川省保健院南苑
						</view>
					</view>
					<view class="infos">
						<view class="info_title">
							挂号科室
						</view>
						<view class="info_content">
							门诊外一科
						</view>
					</view>
					<view class="infos">
						<view class="info_title">
							挂号医生
						</view>
						<view class="info_content">
							刘医生（主任医师）
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

	// 切换就诊人
	const popup = ref(null)
	const open = () => {
		popup.value.open()
	}
	
	const close = () => {
		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		// 记录列表
		.recordslists{
			margin-top: 30rpx;
			.recordslist{
				padding-top: 28rpx;
				padding-bottom: 34rpx;
				background-color: #fff;
				border-radius: 16rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				.title{
					padding-left: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					font-weight: 700;
					position: relative;
				}
				.title:before{
					content: '';
					width: 8rpx;
					height: 36rpx;
					background-color: rgba(22, 119, 255, 1);
					border-radius: 16rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				.infolists{
					margin-top: 28rpx;
					padding-left: 28rpx;
					box-sizing: border-box;
					.infos{
						height: 40rpx;
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						font-family: 'Microsoft YaHei UI', sans-serif;
						color: #1F1F1F;
						font-size: 28rpx;
						.info_title{
							color: #7f7f7f;
							margin-right: 62rpx;
						}
					}
				}
			}
		}
	}       
</style>
